<!DOCTYPE html>
<html>
<head>
    <title>{$site_name}</title>
    <meta name="keywords" content="{$site_seo_keywords}"/>
    <meta name="description" content="{$site_seo_description}">
    <meta name="author" content="日新网">
    <tc_include file="Public:head"/>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #333333;
        }

        .ellipsis3 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .tabhidden {
            display: none;
        }

        #account_top span {
            cursor: pointer;
        }

        #account_top span:last-child {
            margin-left: 226px;
        }

        .tabcontent_name {
            font-size: 22px;
            color: #000232;
            margin-top: 46px;
            display: inline-block;
        }

        .tabcontent_size {
            margin-left: 80px;
        }

        .tabcontent_modify {
            width: 60px;
            height: 30px;
            background-color: #000232;
            border-radius: 10px;
            font-size: 18px;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            display: inline-block;
            cursor: pointer;
            margin-top: 50px;
        }

        .tabcontent1 {
            font-size: 22px;
            color: #000232;
            margin-top: 40px;
            display: block;
            margin-bottom: 12px;
            font-weight: bolder;
            display: inline-block;
        }

        .tabcontent1_1 {
            margin-left: 24px;
            color: #000232;
            font-size: 18px;
            position: relative;
            top: 2px;
        }

        .tabcontent2 {
            font-size: 18px;
            color: #000232;
            margin-bottom: 38px;
            display: block;
        }

        .tabcontent3 {
            font-size: 18px;
            color: #000232;
        }

        .tabcontent4 {
            margin: 0 75px 0 35px;
        }

        .tabcontent6 {
            margin-top: 28px;
            font-size: 18px;
            color: #333333;
            border: solid 1px #c5c5c5;
            height: 66px;
            padding: 6px;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: Microsoft YaHei;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #333333;
        }

        #tabtop {
            width: 820px;
            height: 60px;
            border-bottom: solid 1px #000232;
            margin-left: 55px;
            line-height: 60px;
            justify-content: space-between;
            display: flex;
            padding: 0 90px;
        }

        #tabcontent {
            padding-left: 70px;
        }

        #tabcontent li {
            width: 916px;
            height: 108px;
            border-bottom: 1px solid #c5c5c5;
        }
        .active {
            display: block;
        }
        .no-active {
            display: none;
        }
        #account_top {
            width: 770px;
            border-bottom: 1px solid #c5c5c5;
            font-size: 16px;
            line-height: 48px;
            height: 40px;
            color: #000232;
            padding-left: 60px;
        }

        #account_top span {
            cursor: pointer;

        }

        #account_top span:last-child {
            margin-left: 226px;
        }

        .tabcontent_number1 {
            margin-left: 50px;
            margin-bottom: 35px;
        }

        .tabcontent_number2 {
            font-size: 12px;
            color: #707070;
            margin-right: 12px;
            letter-spacing: 2px;
            display: inline-block;
            width: 76px;
            text-align: right;
            position: relative;
            top:-3px;
        }

        .tabcontent_number3 {
            height: 28px;
            border: solid 1px #707070;
            outline: none;
            width: 238px !important;
        }

        .tabcontent_number5 {
            width: 238px;
        }

        .tabcontent_number6 {
            width: 200px;
        }

        .tabcontent_number7 {
            width: 200px;
        }

        .tabcontent_submit {
            width: 60px !important;
            height: 30px;
            background-color: #000232;
            border-radius: 10px;
            font-size: 18px;
            color: #ffffff;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            margin-left: 135px;
            cursor: pointer;
        }

        .tabcontent_esc {
            width: 60px;
            height: 30px;
            background-color: #ffffff;
            border-radius: 10px;
            border: solid 1px #000232;
            font-size: 18px;
            color: #000232;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            margin-left: 36px;
            cursor: pointer;
        }

        .account_title {
            font-size: 22px;
            color: #a9a9a9;
            margin: 18px 0 28px 60px;
        }

        .font18 {
            font-size: 16px;
            color: #333333;
        }

        .tabcontent_left4 {
            margin-left:50px;
            position: relative;
            width: 600px;
        }

        .submit_btn {
            width: 96px;
            height: 30px;
            color: #fff;
            background-color: #000232;
            display: inline-block;
            line-height: 30px;
            text-align: center;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin-top: 25px;
            letter-spacing: 1px;
            cursor: pointer;
            font-size: 16px;
        }

        .submit_btm_sm1 {
            width: 60px;
            margin: 0 40px 0 120px;
        }

        .submit_btm_sm2 {
            width: 58px;
            height: 29px;
            background-color: #fff;
            color: #000232;
            border: 1px solid #000232;
        }

        .verification {
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
        }

        .verification span {
            font-size: 14px;
            color: #000232;
        }

        .disable {
            background-color: #949494;
        }
        .shift_pre {
            box-sizing: border-box;
            padding-right:85px!important;
            width:250px!important;
            height:32px!important ;
        }
        .shift{
            color: #000232;
            background-color: #aeaeae;
            display: inline-block;
            height: 32px;
            line-height: 32px;
            width: 90px;
            text-align: center;
            margin-right: 225px;
            margin-top: -5px;
            font-size: 13px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        .list-group {
            margin-left: 60px;
        }
        .span9 {
            margin-left: -4px;
            width: 990px;
        }
        .opera_div {

        }
        /*个人的中心布局样式调整*/
        .container {
            width: 1190px;
        }
        .row {
            margin-left: 0px;

        }
        .span3 {
            margin-left: 0;
            width: 280px;
        }
        .span9 {
            width: 830px;
            margin-left: 80px;
        }

        /*
        .container .title{
            font-size: 16px;
            color: #000232;
            line-height: 48px;
            padding-left: 60px;
            border-bottom: 1px solid #676884;
            margin-bottom: 18px;
        }

       */
        /*个人的中心布局样式调整结束*/
    </style>
</head>
<body class="body-white" id="top">
<tc_include file="Public:nav"/>

<div class="container tc-main">
    <div class="row" >
        <div class="span3">
            <tc_include file="Public:usernav"/>
        </div>
        <div class="span9">
            <p id="account_top">
                账号管理
            </p>
            <div class="tabs base_info">
                <!--修改密码-->
                <!--管理首页-->
                <div class="active">
                    <div class="opera_div">
                        <p class="tabcontent_number1" style="margin-top: 34px;">
                            <span class="tabcontent_number2">绑定手机:</span><span class="font18">{$short_mobile|default="未绑定"}</span>
                        </p>
                        <p class="tabcontent_number1">
                            <span class="tabcontent_number2">绑定微信:</span>
                            <notempty name="unionid">
                                <span class="font18">{$user_login|default="未绑定"}</span>
                            <else/>
                                <span class="font18">未绑定</span>
                            </notempty>
                        </p>
                        <p class="tabcontent_number1">
                            <span class="tabcontent_number2">登录密码:</span>
                            <span class="font18"  style="position:relative;top:3px;">
                                <notempty name="user_pass">
                                    ******
                                <else/>
                                    无
                                </notempty>
                            </span>
                        </p>
                        <p class="tabcontent_number1" style="margin-left: 140px;">
                            <span class="submit_btn bind_mobile_btn <?php echo (empty($mobile) || empty($unionid)) ? '' : 'disable'?>" style="margin-right: 40px;">
                                <if condition="empty($unionid)">绑定微信<else />绑定手机</if>
                            </span>
                            <span class="submit_btn mod_pass_btn {:empty($mobile) ? 'disable' : ''}">修改密码</span>
                        </p>
                    </div>

                    <!--绑定状态下修改密码页-->
                    <div class="no-active mod_pass change_div">
                        <form action="{:U('user/profile/password_post')}" method="post">
                            <input class="mobile" type="hidden" value="{$mobile}" name="mobile">
                            <p class="tabcontent_number1" style="margin-top: 34px;">
                                <span class="tabcontent_number2">原始密码:</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number5" placeholder="原始密码" name="old_password">
                            </p>
                            <p class="tabcontent_number1">
                                <span class="tabcontent_number2" style="margin-left: -2px;">新密码:</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number6" placeholder="新密码" name="password">
                            </p>
                            <p class="tabcontent_number1">
                                <span class="tabcontent_number2">确认密码:</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number7" placeholder="确认密码" name="repassword">
                            </p>
                            <p class="tabcontent_number1 tabcontent_left4">
                                <span class="tabcontent_number2"> 动态验证码:</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number7 bind_smscode_input shift_pre" placeholder="动态验证码" name="sms_code">
                                <span class="verification shift">获取验证码</span>
                            </p>
                            <p class="tabcontent_number1">
                                <span class="submit_btn submit_btm_sm1 bind_ok" style="margin-right: 40px;">完成</span>
                                <span class="submit_btn submit_btm_sm2 bind_no">取消</span>
                            </p>
                        </form>
                    </div>

                    <!--绑定手机号？-->
                    <div class="no-active bind_mobile change_div" style="margin-top: 30px;">
                        <form action="{:U('user/profile/password_post')}" method="post">
                            <input type="hidden" name="bind_mobile" value="1">
                            <p class="tabcontent_number1" >
                                <span class="tabcontent_number2">输入手机号</span>
                                <input type="number" class="tabcontent_number3 tabcontent_number7 mobile" placeholder="输入手机号" name="mobile">
                            </p>
                            <p class="tabcontent_number1">
                                <span class="tabcontent_number2" style="margin-left: -2px;">新密码</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number6" placeholder="新密码" name="password">
                            </p>
                            <p class="tabcontent_number1">
                                <span class="tabcontent_number2">确认密码</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number7" placeholder="确认密码" name="repassword">
                            </p>
                            <p class="tabcontent_number1 tabcontent_left4">
                                <span class="tabcontent_number2">动态验证码</span>
                                <input type="password" class="tabcontent_number3 tabcontent_number7 shift_pre" placeholder="动态验证码" name="sms_code">
                                <span class="verification shift">获取验证码</span>
                            </p>
                            <p class="tabcontent_number1">
                                <span class="submit_btn submit_btm_sm1 bind_ok" style="margin-right: 40px;">完成</span>
                                <span class="submit_btn submit_btm_sm2 bind_no">取消</span>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /container -->
<tc_include file="Public:footer"/>
<tc_include file="Public:scripts"/>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
<script>
    $(function () {
        $('.tabcontent_modify').click(function () {
            window.location.href = "{:U('user/profile/edit_baseinfo')}";
        });

        $("#account_top span").off("click").on("click", function () {
            var index = $(this).index();
            $(this).addClass("color-tab").siblings().removeClass("color-tab");
            $(".base_info > div").eq(index).addClass("active").removeClass('no-active').siblings().removeClass("active").addClass("no-active");
        });

        // 绑定手机
        $('.bind_mobile_btn').click(function () {
            var has_weixin = "{$unionid}";
            if (!has_weixin) {
                window.location.href = "{:U('Wx/WxLogin/login_qrcode')}";
                return;
            }

            if (!$(this).hasClass('disable')) {
                $('.bind_mobile').removeClass('no-active');
                $('.opera_div').addClass('no-active');
            }
        });

        // 修改密码
        $('.mod_pass_btn').click(function () {
            if (!$(this).hasClass('disable')) {
                $('.mod_pass').removeClass('no-active');
                $('.opera_div').addClass('no-active');
            }
        });

        // 提交表单
        $('.bind_ok').click(function () {
            var valid = true;
            $(this).parents('form').find('input').each(function (index, item) {
                var value = $(item).val();
                if (!value) {
                    $(item).focus();
                    layer.msg('请完善信息');
                    valid = false;
                    return;
                }
            });
            if (valid) {
                $(this).parents('form').submit();
            }
        })

        $('.bind_no').click(function () {
            $('.opera_div').removeClass('no-active');
            $('.change_div').addClass('no-active');
        })

    });

</script>

<script>
    var sending = false;
    var timer   = 0;
    var sec     = 0;
    $('.shift').click(function () {
        if (!sending) {
            var _this   = $(this);
            var phone   = $(this).parents('form').find('.mobile').val();

            if (!isPhoneAvailable(phone)) {
                layer.msg("请输入正确的手机号");
                return;
            }

            $.post("{:U('User/Public/send_aliyun_sms')}", {phone : phone}, function (re) {
                if (re.status) {
                    layer.msg(re.info);
                    sending = true;
                    sec     = 60;
                    timer   = setInterval('change_sms_but()', 1000);
                    change_sms_but();

                } else {
                    layer.msg(re.info);
                }
            })
        }
    });

    function change_sms_but() {
        var but = $('.shift');
        if (sec == 1) {
            but.html("点击获取");
            clearInterval(timer);
            sending = false;
            sec     = 60;
        } else {
            sec--;
            but.html(sec + 's后获取');
        }
    }

    function isPhoneAvailable(str) {
        var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        if (!myreg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
</script>
<script>
    $(function () {
        setTimeout(anim,500);
        function anim(){
            $(".animate_data").find(".menu_main").animate({
                marginLeft:'-90px'
            },300);
            $(".animate_data").find(".menu_list").animate({
                height:"36px",
                paddingTop:'12px'
            },300);
            $(".animate_data").find(".tab_number").addClass("active");
        }
    })
</script>
</body>
</html>